<script lang="ts" setup>
import { reactive } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import useConfig from '@framework/useConfig'

import type { SelectEventHandler, SelectInfo } from 'ant-design-vue/es/menu/src/interface'
import { BugFilled, ContainerFilled, ToolFilled } from '@ant-design/icons-vue'
import type { IconType } from '@ant-design/icons-vue/lib/components/Icon'

interface ProjectMenuInfo {
  path: string
  title: string
  icon?: IconType
  submenu?: ProjectMenuInfo[]
}
interface DataModel {
  collapsed: boolean
  selectedKeys: string[]
  openKeys: string[]
  menuList: ProjectMenuInfo[]
}

const router = useRouter()
const route = useRoute()
const projectConfig = useConfig()

const dataModel = reactive<DataModel>({
  collapsed: false,
  selectedKeys: [route.path],
  openKeys: [route.path],
  menuList: [
    { title: '主页', path: '/index', icon: ContainerFilled },
    { title: 'TEST', path: '/test', icon: BugFilled },
    { title: '404', path: '/404', icon: ToolFilled },
  ],
})

console.log(dataModel)

/**
 * 点击退出登录
 */
function onLogout() {
  window.location.href = useConfig().web.auth.loginUrl
}

/**
 * 菜单选择
 * @param item
 */
const onMenuSelect: SelectEventHandler = function (item: SelectInfo) {
  console.log('选中的item', item)
}
</script>

<template>
  <a-layout class="layout-wrap">
    <a-layout-header class="layout-header">
      <div class="nav-tot">
        <div style="cursor: pointer; display: flex" @click="router.push('/')">
          <img
            :src="projectConfig.web.page.logo"
            alt=""
            height="40"
            style="margin: auto"
          >
          <span style="font-size: 18px; padding-left: 8px" class="title-txt">{{
            projectConfig.web.page.title
          }}</span>
        </div>
        <div class="img-head add-left" />
        <a-dropdown>
          <a class="ant-dropdown-link" style="color: #000" @click.prevent>
            张三
          </a>
          <template #overlay>
            <a-menu>
              <a-menu-item>
                <a href="javascript:;" @click="onLogout">退出登录</a>
              </a-menu-item>
            </a-menu>
          </template>
        </a-dropdown>
      </div>
    </a-layout-header>

    <div v-if="!dataModel.openKeys" class="error">
      提示：当前未加入组织，请联系管理员进行分配
    </div>
    <a-layout v-else class="cust-layout">
      <a-layout-sider
        :trigger="null"
        collapsible
        width="260"
        class="cust-layout-nav"
      >
        <a-menu
          v-model:open-keys="dataModel.openKeys"
          v-model:selected-keys="dataModel.selectedKeys"
          theme="light"
          :selectable="true"
          mode="inline"
          class="h-100"
          @select="onMenuSelect"
        >
          <!-- 不带子菜单的 -->
          <a-menu-item v-for="menu in dataModel.menuList" :key="menu.path" class="yh-menu-item" @click="router.push(menu.path)">
            <component :is="menu.icon" />
            <span>{{ menu.title }}</span>
          </a-menu-item>
        </a-menu>
      </a-layout-sider>

      <a-layout-content class="layout-con">
        <div class="content">
          <slot />
        </div>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<style lang="stylus" scoped>
.layout-wrap {
  background: #EFF2F8 !important;
  height: 100vh;
  overflow: hidden;
  .cust-layout {
    flex: 1;
    overflow: hidden;
    margin: 0 0;
    background-color: #000;
    .cust-layout-nav {
      background: #EFF2F8 !important;
      overflow: auto;
    }
  }
  .layout-con {
    height: 100%;
    overflow: hidden;
    background-color: #EFF2F8 !important;
    padding-right: 10px;
    .content {
      overflow-y: scroll;
      background: #FFFFFF;
      border-radius: 24px 24px 24px 24px;
      height: 100%;
      padding:24px;
    }
  }
}
.px1200 {
  width: 1200px;
  margin: 0 auto;
}
.error {
  text-align: center;
  padding-top: 120px;
  /* 与body同色 */
  background-color: rgb(246, 250, 251);
}
.layout-header {
  color: #000;
  padding: 0;
  // background: url(../assets/images/navBg.png) center no-repeat;
  // background-size: cover;
  background: #EFF2F8;
}
.nav-tot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #000;
  padding: 0 20px;
  .nav-org {
    margin-left: auto;
    margin-right: 20px;
    cursor: pointer;
  }
  .title-txt{
    height: 64px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 20px;
    color: #000000;
    line-height: 64px;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }
  .img-head {
    margin-right: 10px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.458823529411765);
    &.add-left {
      margin-left: auto;
    }
  }

}
</style>

<style lang="stylus">
.yh-menu-item{
  height: 28px;
  text-align: left;
  margin-inline: 0 !important;
  margin-block: 0 !important;
  margin:0 !important;
  width: 100% !important;
  &.ant-menu-item-selected{
    border-right:4px solid #1770EC;
  }
  span{
    text-transform: none;
    font-style: normal;
    line-height: 28px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 20px;
    color: rgba(0,0,0,0.65);
  }
}
.ant-menu-item{
  height: 60px !important;
}
.ant-menu-root{
  background-color: #EFF2F8 !important;
  border-inline-end: none !important;
  padding-top:24px;
}
.ant-menu-item-selected{
  width: 220px;
  height: 60px;
  background: rgba(26,114,236,0.08);
  border-radius: 0px 0px 0px 0px !important;

  span{
    font-family: PingFang SC, PingFang SC;
    font-weight: 400 !important;
    font-size: 20px !important;
    color: #1770EC !important;
    line-height: 60px !important;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }

}
</style>
